<template>
	<div>
		<Header />
		<div>
			<div style="position: relative;">
				<img style="width: 100%;height: auto;" src="@/assets/images/industryNews16.jpg">
				<div style="position: absolute;bottom: 5px;left: 0;background-color: rgba(0, 0, 0, 0.2);width: 100%;">
					<div class="indexContainer mobileFontSize12"
						style="display: flex;align-items: center;font-size: 16px;color: #fff;padding: 10px 0;">
						<img style="width: 12px; height: 15px" src="@/assets/images/industryNews30.png" />
						<span style="padding-left:5px;">当前位置：</span>
						<span>首页</span>
						<span style="padding: 0 5px;">></span>
						<span>创新联合体</span>
						<span style="padding: 0 5px;">></span>
						<span>创新课题</span>
						<span style="padding: 0 5px;">></span>
						<span>课题详情</span>
					</div>
				</div>
			</div>

			<div class="indexContainer">
				<div style="padding: 50px 0;flex-direction: column;">
					<div style="padding: 30px;background-color: #f4f4f4;" class="mobilePadding">
						<div style="background-color: #fff;padding: 50px 0;" class="mobilePadding">

							<el-row>
								<el-col :xs="24" :sm="24" :md="{span:20, offset: 2}" :lg="{span:20, offset: 2}"
									:xl="{span:20, offset: 2}">
									<div style="text-align: center;">
										<h2 style="color: #333;font-size: 28px;">{{info.name}}</h2>
									</div>

									<div style="text-align: center;font-size: 16px;margin-top: 30px;">
										{{info.applicableIndustry}}
									</div>

									<div style="text-align: center;font-size: 16px;margin-top: 30px;"
										class="mobileFontSize14">
										<span style="color: #333;">发布人：{{info.releaseUser}}</span>
										<span style="color: #333;margin-left: 15px;">发布时间：{{info.auditTime}}</span>
										<img style="width: 20px;height: 13px;margin-left: 15px;"
											src="@/assets/images/industryNews24.png">
										<span style="color: #aaa;margin-left: 3px;">{{info.pageViews}}</span>
									</div>

									<div style="border-top: 1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 20px 0;margin:20px 0;display: flex;flex-direction: column;"
										class="mobilePadding">

										<div style="margin-top: 15px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">课题描述</span>
										</div>

										<div style="margin-top: 15px;">
											<span
												style="font-size: 20px;color: #333;line-height: 35px;">{{info.settleMatter}}</span>
										</div>

										<div style="margin-top: 30px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">内容详情</span>
										</div>

										<div style="margin-top: 15px;" v-html="info.request"></div>
										
										
										<div v-if="info.memberDtos&&info.memberDtos.length" style="margin-top: 30px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">
												课题组成员</span><span style="font-size: 22px;color: #333;font-weight: 600;">（{{info.memberDtos.length}}）</span>
											<div style="display: flex;flex-wrap: wrap;">
												<div v-for="(item,index) in info.memberDtos"
													style="font-size: 18px;color: #333;margin: 15px 15px 15px 0;display: flex;align-items: center;position: relative;">
													<img style="width: 19px; height: 19px"
														src="@/assets/images/industryNews8.png" />
													<!-- <img v-if="item.userDto&&item.userDto.staffType&&item.userDto.staffType=='17'" style="position: absolute;bottom: 0;left: 40px;width: 15px;height: 15px;"
														src="@/assets/images/industryNews48.png"> -->
													<span
														style="margin-left: 3px;">{{item.name}}</span>
												</div>
											</div>
										</div>
										
										<div v-if="info.fileDtos&&info.fileDtos.length!=0"
											style="margin-top: 30px;">
											<span
												style="font-size: 22px;border-bottom: 3px solid #266af2;color: #333;font-weight: 600;">
												附件</span>
											<div v-for="(item,index) in info.fileDtos"
												style="font-size: 20px;text-decoration: underline;color: #409eff;cursor: pointer;margin-top: 15px;"
												@click="handleFile(index)">
												{{item.name}}
											</div>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</div>
			</div>
		</div>

		<Footer />
		<contributeDialog ref="contributeDialog" @reloadData="getDetail()"></contributeDialog>
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import contributeDialog from "@/view/personalCenter/myPlanPromotion/dialogContribute"; //方案投稿
	import {
		getKey
	} from "@/request/api/planPromotion";
	import {
		getAllianceCollectingListDetail
	} from "@/request/api/innovationConsortium";
	export default {
		components: {
			Header,
			Footer,
			contributeDialog
		},
		data() {
			return {
				info: {},
				userInfo:{}
			}
		},
		created() {
			this.getDetail()
		},
		mounted() {
			//console.log('mounted')
		},
		methods: {
			getDetail() {
				getAllianceCollectingListDetail(this.$route.query.id).then((res) => {
					// console.log('res',res)
					if (res.data.code == 200) {
						this.info = res.data.result
						document.querySelector('meta[name="keywords"]').setAttribute('content', res.data.result.keyword)
						document.querySelector('meta[name="description"]').setAttribute('content', res.data.result.description)
						document.title = res.data.result.name

						getKey('applicable_industry').then(res => {
							if (res.data.code === 200) {
								let list = res.data.result.items
								list.map((item2) => {
									if (this.info.applicableIndustry && this.info
										.applicableIndustry == item2.value) {
										this.info.applicableIndustry = item2.label
									}
								})
							}
						})
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 点击附件
			handleFile(index) {
				let filePath = this.info.accessoryDtos[index].filePath
				window.open(filePath, '_blank')
			}
		}
	}
</script>
<style lang="less" scoped>
	.form-label {
		text-align: right;
	}

	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 10px !important;
		}

		.mobileMargin {
			margin: 10px !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}
</style>